<template>
  <div>
    <el-input v-if="item.itemType === 'text' || item.itemType === 'password'"
              v-model="item.value"
              :type="item.itemType"
              :maxlength="item.maxlength"
              :minlength="item.minlength"
              :placeholder="item.placeholder"
              :clearable="true"
              :suffix-icon="item.suffixIcon"
              :disabled="item.disabled"
              :readonly="item.readonly">
    </el-input>
    <el-input-number v-if="item.itemType === 'inputNumber'" style="width: 100%"
                     v-model="item.value"
                     controls-position="right"
                     size="small"
                     :disabled="item.disabled"
                     :min="item.min"
                     :max="item.max"
                     :step="item.step"
    ></el-input-number>
    <el-select v-if="item.itemType === 'select'" @change="selectOnChange" style="width:100%"
               v-model="item.value"
               :multiple="item.multiple"
               filterable
               clearable
               :disabled="item.disabled"
               :readonly="item.readonly"
               :placeholder="item.placeholder">
      <el-option
        v-for="(opt ,index5) in item.options"
        :key="index5"
        :label="opt.label"
        :value="opt.value">
      </el-option>
    </el-select>
    <el-date-picker v-if="item.itemType === 'date'" style="width: 100%"
                    v-model="item.value"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    :format="item.format"
                    :align="item.align"
                    :placeholder="item.placeholder">
    </el-date-picker>
    <el-date-picker v-if="item.itemType === 'dateTime'" style="width: 100%"
                    v-model="item.value"
                    type="datetime"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    :format="item.format"
                    :align="item.align"
                    :placeholder="item.placeholder">
    </el-date-picker>
    <el-date-picker v-if="item.itemType === 'dateRange'"
                    v-model="item.value"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    :format="item.format"
                    :align="item.align"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
    </el-date-picker>
    <el-input v-if="item.itemType === 'textarea'"
              v-model="item.value"
              type="textarea"
              :maxlength="item.maxlength"
              :minlength="item.minlength"
              :placeholder="item.placeholder"
              :clearable="true"
              :disabled="item.disabled"
              :readonly="item.readonly"
              :autosize="item.autosize"
              :rows="item.rows">
    </el-input>
    <el-radio-group v-if="item.itemType === 'radio'"
                    :disabled="item.disabled"
                    :readonly="item.readonly"
                    v-model="item.value">
      <el-radio
        v-for="(opt,index5) in item.options"
        :key="index5"
        :label="opt.label">{{opt.name}}
      </el-radio>
    </el-radio-group>
    <el-button v-if="item.itemType==='button'"
               @click="itemBtnClick"
               :disabled="item.disabled"
               size="small"
               :type="item.type">{{item.text}}
    </el-button>
  </div>
</template>
<script>
  export default {
    name: 'VFormItem',
    props: {
      itemProp: {
        type: Object,
        required: true,
      }
    },
    data() {
      return {
        item: {},
        
      };
    },
    methods: {
      itemBtnClick() {
        this.$emit('itemBtnClick');
      },
      selectOnChange(value) {
        this.$emit('selectOnChange', value, this.item);
      }
    },
    created() {
      this.item = this.itemProp;
    }
  }
</script>
<style lang="less" scoped>
  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: white !important;
    color: #3c8dbc !important;
  }
  
  .dropdown_input {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  .el-dropdown-menu__item {
    overflow-y: scroll !important;
    height: 300px !important;
    font-size: 12px !important;
  }
</style>
